<template>
	<view>
		<Navbar :backUrl="'home'"></Navbar>
		<view class="u-form-box u-m-30">
			<u-form :model="form" label-width="200" ref="uForm">
				<u-form-item required label="酒局类型">
					<view class="u-text-right u-auto" :class="themeObj.name ? '' : 'u-color-placeholder'"
						@click="openCommonPopup(2)">
						{{ themeObj.name || '请选择酒局类型 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="酒局主题">
					<u-input placeholder="请输入酒局主题（不超过20个字）" input-align="right" :maxlength="20" :clearable="false"
						v-model="form.des"></u-input>
				</u-form-item>
				<u-form-item required label="酒局开始时间">
					<view class="u-text-right u-auto" :class="form.start_time ? '' : 'u-color-placeholder'"
						@click="openDatePicker">
						{{ form.start_time || '请选择酒局开始时间 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="酒局结束时间">
					<view class="u-text-right u-auto" :class="form.end_time ? '' : 'u-color-placeholder'"
						@click="openDateEndPicker">
						{{ form.end_time || '请选择酒局结束时间 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="报名截止时间">
					<view class="u-text-right u-auto" :class="form.deadline_time ? '' : 'u-color-placeholder'"
						@click="openEndPicker">
						{{ form.deadline_time || '请选择报名截止时间 >'}}
					</view>
				</u-form-item>
				<view class="u-line-bottom u-p-t-20 u-p-b-30 u-font-24 u-color-red">提示：在此之前用户可报名、可取消</view>
				<u-form-item required label="酒局地址">
					<view class="u-text-right u-auto u-text-line-15" :class="form.address ? '' : 'u-color-placeholder'"
						@click="openLocation">
						{{ form.address || '请选择酒局地址 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="酒局详细地址">
					<u-input placeholder="请输入楼栋楼层房间号" input-align="right" :maxlength="24" :clearable="false"
						v-model="form.floor"></u-input>
				</u-form-item>
				<u-form-item required label="酒局人数">
					<view class="u-text-right u-auto">
						<u-number-box v-model="form.number" @change="changeNumber"></u-number-box>
					</view>
				</u-form-item>
				<u-form-item required label="最低人数">
					<view class="u-text-right u-auto">
						<u-number-box v-model="form.min_people" @change="changeMinNumber"></u-number-box>
					</view>
				</u-form-item>
				<view class="u-p-t-20 u-p-b-20 u-font-24 u-color-red">提示：若截止报名后，报名人数少于最低人数，则自动流局</view>
			</u-form>
		</view>
		<view class="u-form-box u-m-30">
			<u-form label-width="360" ref="uForm">
				<u-form-item required label="是否需要审核">
					<view class="u-text-right u-auto" :class="applyObj.name ? '' : 'u-color-placeholder'"
						@click="openCommonPopup(3)">
						{{ applyObj.name || '请选择 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="发布类型">
					<view class="u-text-right u-auto" :class="typeObj.name ? '' : 'u-color-placeholder'"
						@click="openCommonPopup(5)">
						{{ typeObj.name || '请选择 >'}} >
					</view>
				</u-form-item>
				<view v-if="themeObj.is_charge == 1 && themeObj.president_status.includes(president_status)">
					<!-- <u-field class="u-width-100" :border-bottom="false" label="是否需要付费" :required="true"
						input-align="right" label-width="280" :disabled="true">
						<view slot="right" class="u-text-right u-auto u-text-line-15"
							:class="payObj.name ? '' : 'u-color-placeholder'" @click="openCommonPopup(4)">
							{{ payObj.name || '请选择 >'}}
						</view>
					</u-field> -->
				</view>
				<u-form-item required label="每人付费金额"><!-- v-if="isPay" -->
					<u-input placeholder="由组局者自定义" input-align="right" :clearable="false"
						v-model="form.price_two" @blur="onBlur" />
				</u-form-item>
				<!-- <view class="u-p-t-20 u-p-b-20 u-line-bottom u-font-24 u-color-red">
					提示：结束后在酒局详情页提现，手续费为{{ signCommission }}%</view> -->
				<view class="u-p-t-20 u-p-b-20 u-line-bottom u-font-24 u-color-red">提示：平台仅做来友参局费用告知，请青创私董线下收取</view>
				<u-form-item label="酒局说明">
					<u-input placeholder="请输入酒局说明" input-align="right" :clearable="false" v-model="price_title" />
				</u-form-item>
			</u-form>
		</view>
		<!-- <view class="u-form-box u-m-30 u-p-30">
			<view class="u-flex u-row-between">
				<view class="u-font-30 u-font-bold">添加标签</view>
				<view class="u-color-gray">请设置酒局关键词</view>
			</view>
			<view class="u-m-t-30 textarea_box">
				<textarea :value="label" placeholder="方便用户搜索及推送给目标来友。请用#后输入关键词，可设置多个标签。例如#投资#A（不超过36个字）" :maxlength="36"
					:disable-default-padding="true"></textarea>
			</view>
		</view> -->
		<view class="u-m-30 u-p-l-25 u-p-r-25 u-form-box">
			<u-form>
				<u-form-item label-position="top" label="大楼外观">
					<u-upload :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onBuildSuccess" @on-remove="onBuildRemove"
						:before-upload="beforeUpload"></u-upload>
				</u-form-item>
				<u-form-item label-position="top" label="场地门头">
					<u-upload :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onHeadSuccess" @on-remove="onHeadRemove"
						:before-upload="beforeUpload"></u-upload>
				</u-form-item>
				<u-form-item label-position="top" label="酒局环境">
					<u-upload :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onSuccess" @on-remove="onRemove"
						:before-upload="beforeUpload"></u-upload>
				</u-form-item>
				<u-form-item label-position="top" label="微信群二维码">
					<u-upload :action="action" max-count="1" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onWechatSuccess" @on-remove="onWechatRemove"
						:before-upload="beforeUpload"></u-upload>
				</u-form-item>
			</u-form>
			<!-- <view @click="signUpData.show = true" class="u-flex u-p-b-20" v-if="isPay">
				<u-icon class="quesIcon" name="question-circle" size="26" color="#ee2424"></u-icon>
				<view class="u-font-24 u-p-l-10">点击查看《收费酒局代收代付协议》</view>
			</view> -->
		</view>

		<!-- <view class="u-m-t-20 u-flex u-row-center">
			<u-checkbox-group :active-color="'#B3723E'">
				<u-checkbox v-model="agreement" shape="circle">
					<text @click="onViewAgrement()" class="u-color-puce u-font-24">《青创云店代收代付协议》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view> -->

		<view style="height: 200rpx;"></view>
		<Bottom :isTwice="true" :backUrl="'home'" :rightText="'马上发布'" :isClick="bottomBtnStatus" @confirm="confirm">
		</Bottom>

		<!-- 开始 -->
		<MrdotyanRangeCalendar :rangeTitle="'请选择开始时间'" :calendarShow="calendarShow" @close="calendarShow = false"
			@change="calendarChange"></MrdotyanRangeCalendar>
		<!-- 结束 -->
		<MrdotyanRangeCalendar :rangeTitle="'请选择结束时间'" :calendarShow="calendarEndShow" @close="calendarEndShow = false"
			@change="calendarEndChange"></MrdotyanRangeCalendar>

		<!-- 截止 -->
		<MrdotyanRangeCalendar :rangeTitle="'请选择截止时间'" :calendarShow="calendarReportShow"
			@close="calendarReportShow = false" @change="calendarReportChange"></MrdotyanRangeCalendar>

		<!-- 通用提示框 -->
		<u-modal v-model="modal.show" width="70%" :title="'温馨提示'" :confirm-color="'#fb6316'"
			:title-style="modal.titleStyle" :confirm-text="modal.confirmText" :show-cancel-button="false"
			:content="modal.content" @cancel="modal.show = false" @confirm="modalConfirm">
			<view class="slot-content u-p-30 u-text-center">
				<rich-text :nodes="modal.content"></rich-text>
			</view>
		</u-modal>

		<!-- 收费酒局代收代付协议 -->
		<!-- <u-mask mode="center" mask-click-able="false" :show="signUpData.show">
			<view class="signUpMask">
				<view class="u-back-white u-p-20 u-radius-20" style="width: 80%; height: 70%;">
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="signUpScrolltolower">
						<view class="u-font-30 line_height_15 report_content">
							<rich-text :nodes="signUpData.content"></rich-text>
						</view>
					</scroll-view>
					<view class="u-m-t-50 signUpClose" v-if="signUpData.iconShow">
						<div class="signUpCloseBtn" @click="onAgreeAgrement()">同意，下次不再提示</div>
					</view>
				</view>
			</view>
		</u-mask> -->

		<!-- 通用选择框 -->
		<CommonPopup :popupShow="commonPopup.show" :list="commonPopup.list" @onChooseLabel="onChooseLabel"
			@popupClose="commonPopup.show = false"></CommonPopup>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import CommonPopup from '@/components/CommonPopup.vue'
	import MrdotyanRangeCalendar from '@/teaBureau/components/RangeCalendar.vue'
	import env from '@/network/env.js'
	import {
		teaAddressList,
		teaThemeList,
		teaCreate
	} from '@/network/tea.js'
	import {
		getAgreement,
		userInfo,
		getConfigInfo
	} from "@/network/api.js"
	import {
		hasEmptyValue,
		formatDate,
		debounce,
		call,
		formatContent
	} from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Bottom,
			MrdotyanRangeCalendar,
			CommonPopup
		},
		data() {
			return {
				form: {
					theme_id: '', // 酒局类型
					des: '', // 酒局主题
					start_time: '',
					end_time: '',
					deadline_time: '',
					number: 9,
					min_people: 0, // 最低参加人数
					address: '', // 酒局地址
					floor: '', // 房间号
					longitude: 0, // 经度
					latitude: 0, // 纬度
					price_two: '',
				},
				price_title: '', // 付费说明
				imageList: [], // 酒局环境
				buildImageList: [], // 大楼外观
				headImageList: [], // 场地门头
				wechatList: [], // 微信群二维码
				label: '',
				themeObj: {},
				applyObj: {},
				typeObj: {
					name: '完全公开',
					id: 1
				},
				payObj: {
					name: '免费',
					id: 1
				},
				payList: [{
					name: '免费',
					id: 1
				}],
				startTime: '',
				/* yyyy/MM/dd HH:mm:ss */
				action: `${env.baseUrl}/api/uploadOssImage`,
				modal: {
					show: false,
					showCancel: false,
					confirmText: '确定',
					teaId: 0,
					content: '发布成功',
					type: 0, // 0 关闭弹窗  1 成功跳转
					titleStyle: {
						color: '#fb6316',
						fontSize: '40rpx',
						fontWeight: 'bold'
					}
				},
				commonPopup: {
					show: false,
					list: [],
					current: 0 /* 1人数   2主题   3是否审核   4是否付费 */
				},
				tagCustomStyle: {
					height: '80rpx',
					lineHeight: '80rpx',
					background: '#eee',
					padding: '0 20rpx',
					borderRadius: '20rpx'
				},
				textareaStyle: {
					background: '#F2F5FA',
					borderRadius: '20rpx',
					padding: '20rpx',
					fontSize: '28rpx'
				},
				placeholderStyle: {
					fontSize: '24rpx'
				},
				agreement: true,
				isCollect: 0, // 0 未同意过协议  1 同意过
				isPay: true, // 付费类型免费不展示
				user_id: uni.getStorageSync("user_id"),
				president_status: '' + uni.getStorageSync("president_status"),
				/* sss */
				calendarShow: false,
				calendarEndShow: false,
				calendarReportShow: false,
				bottomBtnStatus: true,
				signUpData: {
					show: false,
					iconShow: false,
					content: ''
				},
				signCommission: '0'
			}
		},
		onLoad() {
			this.onGetUserInfo()
			this.onGetAgreement()
		},
		methods: {
			async onGetUserInfo() {
				const res = await userInfo({user_id: this.user_id})
				if (Number(res.data.is_agree_collect) == 1) {
					this.isCollect = 1
					this.agreement = true
				}
			},
			async onGetAgreement() {
				const res = await getAgreement({type: 23})
				this.signUpData.content = formatContent(res.data.content)
				const sign = await getConfigInfo({key: 'sign_commission'})
				this.signCommission = sign.data.value
			},
			openDatePicker() {
				this.calendarShow = true
			},
			openDateEndPicker() {
				this.calendarEndShow = true
			},
			openEndPicker() {
				this.calendarReportShow = true
			},
			onSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onRemove(val) {
				this.imageList.splice(val, 1)
			},
			onWechatSuccess(val) {
				this.wechatList.push(val.data.url)
			},
			onWechatRemove(val) {
				this.wechatList.splice(val, 1)
			},
			callMobile(val) {
				call(val)
			},
			openLocation() {
				const _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.form.address = `${res.address}${res.name}`
						_this.form.latitude = res.latitude + Number(`0.000${Math.floor(Math.random() * 10)}`)
						_this.form.longitude = res.longitude + Number(`0.000${Math.floor(Math.random() * 10)}`)
					}
				})
			},
			calendarChange(val) {
				// 1800000 == 1小时
				// 86400000 == 1天
				let now = new Date().getTime()
				let start = new Date(val.dateTime).getTime()
				let diff = start - now
				let end = new Date(val.dateTime).getTime() + 1800000 * 6
				let deadline = 0
				if (diff >= 172800000) {
					deadline = start - 86400000
				} else {
					deadline = start
				}
				this.startTime = val.dateTime
				this.form.start_time = `${formatDate(start / 1000)}:00`
				this.form.end_time = `${formatDate(end / 1000)}:00`
				this.form.deadline_time = `${formatDate(deadline / 1000)}:00`
				this.calendarShow = false
			},
			calendarEndChange(val) {
				let start = new Date(this.startTime).getTime()
				let end = new Date(val.dateTime).getTime()
				if (end <= start) {
					uni.showToast({
						title: '结束时间不能小于等于酒局开始时间',
						icon: 'none'
					});
				} else {
					this.form.end_time = `${formatDate(end / 1000)}:00`
					this.calendarEndShow = false
				}
			},
			calendarReportChange(val) {
				let time = new Date(val.dateTime).getTime()
				this.form.deadline_time = `${formatDate(time / 1000)}:00`
				this.calendarReportShow = false
			},
			changeNumber(val) {
				this.form.number = val.value
			},
			changeMinNumber(val){
				this.form.min_people = val.value
			},
			onBuildSuccess(val) {
				this.buildImageList.push(val.data.url)
			},
			onHeadSuccess(val) {
				this.headImageList.push(val.data.url)
			},
			onSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onBuildRemove(val) {
				this.buildImageList.splice(val, 1)
			},
			onHeadRemove(val) {
				this.headImageList.splice(val, 1)
			},
			onRemove(val) {
				this.imageList.splice(val, 1)
			},
			beforeUpload(index, list) {
				uni.showLoading({
					title: "上传中"
				})
			},
			openCommonPopup(num) {
				switch (num) {
					case 1:
						this.commonPopup.list = [{
								id: 6,
								name: '6人',
								check: false
							},
							{
								id: 7,
								name: '7人',
								check: false
							},
							{
								id: 8,
								name: '8人',
								check: false
							}
						]
						break;
					case 2:
						teaThemeList().then(res => {
							let list = []
							res.data.map(item => {
								if (item.president_status.includes('' + uni.getStorageSync("president_status"))) {
									item.check = false
									list.push(item)
								}
							})
							this.commonPopup.list = list
						})
						break;
					case 3:
						this.commonPopup.list = [{
								id: 0,
								name: '不需要审核',
								check: false
							},
							{
								id: 1,
								name: '需要审核',
								check: false
							}
						]
						break;
					case 4:
						this.commonPopup.list = [{
							id: 2,
							name: '付费',
							check: false
						}]
						break;
					case 5:
						this.commonPopup.list = [{
								id: 1,
								name: '完全公开',
								check: false
							},
							{
								id: 3,
								name: '私密酒局',
								check: false
							}
						]
						break;
				}
				this.commonPopup.current = num
				this.commonPopup.show = true
			},
			onViewAgrement() {
				this.signUpData.show = true
			},
			onAgreeAgrement() {
				this.isCollect = 1
				this.agreement = true
				this.signUpData.show = false
			},
			onChooseLabel(val) {
				switch (this.commonPopup.current) {
					case 1:
						this.form.number = val.id
						break;
					case 2:
						this.form.theme_id = val.id
						this.themeObj = val
						this.payObj = {}
						// this.form.price = (val.id == 1 ? 0 : 9.9)
						this.isPay = true
						this.price_title = ''
						break;
					case 3:
						this.applyObj = val
						break;
					case 4:
						this.payObj = val
						// this.form.price = (val.id == 1 ? 0 : 9.9)
						this.isPay = (val.id == 1 ? false : true)
						this.price_title = ''
						// if (this.isPay) {
						// 	getAgreement({
						// 		type: 23
						// 	}).then(res => {
						// 		this.signUpData.content = formatContent(res.data.content)
						// 		this.signUpData.show = true
						// 	})
						// }
						break;
					case 5:
						this.typeObj = val
						break;
				}
				this.commonPopup.list.find(item => item.id == val.id).check = true
				this.commonPopup.show = false
			},
			signUpScrolltolower() {
				this.signUpData.iconShow = true
			},
			beforeUpload(index) {
				uni.showLoading({
					title: "上传中..."
				})
			},
			onBlur() {
				/* if (this.form.price < 9.9) {
					this.form.price = 9.9; // 如果小于最小值，则设置为最小值
				} */
			},
			confirm: debounce(async function() {
				this.bottomBtnStatus = false
				if (hasEmptyValue(this.form)) {
					if (this.isCollect == 0 && !this.agreement) {
						this.signUpData.show = true
						this.bottomBtnStatus = true
					} else {
						const params = {
							...this.form,
							user_id: this.user_id,
							address: this.form.address + this.form.floor,
							is_apply: this.applyObj.id,
							pay_type: 1,
							open_type: this.typeObj.id,
							price_title: this.price_title,
							image_one: this.buildImageList.join(','),
							image_two: this.headImageList.join(','),
							image_three: this.imageList.join(','),
							weixin_url: this.wechatList.join(',')
						}
						const res = await teaCreate(params)
						switch (res.err) {
							case 0:
								const agreeRes = await getAgreement({
									type: 27
								})
								this.modal.content = formatContent(agreeRes.data.content)
								this.modal.type = 1
								this.modal.show = true;
								this.modal.teaId = res.data.tea_id;
								break;
							case '-9':
								this.modal.type = 0
								this.modal.content = '当前时间段存在其他酒局，请修改酒局时间。'
								this.modal.show = true
								this.bottomBtnStatus = true
								break;
							default:
								break;
						}
					}
				} else {
					this.bottomBtnStatus = true
					uni.showToast({
						title: "必填项不能为空",
						icon: "none"
					})
				}
			}, 200),
			modalConfirm() {
				const _this = this
				switch (this.modal.type) {
					case 0:
						this.modal.show = false
						break;
					case 1:
						getApp().globalData.switchCustom = true
						uni.switchTab({
							url: "/pages/home/home"
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkAddressBox {
		height: 1000rpx;
		padding: 30rpx 30rpx 50rpx 30rpx;

		.address_box {
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: #FAFAFA;
		}

		.address_check_box {
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fb6316;
			color: #fff;
		}

		.addBtn {
			flex: 1;
			height: 80rpx;
			background: #fff;
			color: #000;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-right: 40rpx;
			border: 1rpx solid #ccc;
		}

		.bottomBtn {
			flex: 1;
			height: 80rpx;
			background: #fb6316;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
		}
	}

	.tag_display {
		font-size: 26rpx;
		border: 1rpx solid #fb6316;
		color: #fb6316;
		background: #fff;
		padding: 0rpx 20rpx;
		display: inline-table;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.tag_name {
		font-size: 26rpx;
		border: 1rpx solid #fb6316;
		color: #fb6316;
		background: #fff;
		padding: 10rpx 20rpx;
		display: inline-table;
		margin: 20rpx 20rpx 0 0;
		border-radius: 10rpx;
	}

	.tag_btn {
		height: 80rpx;
		background: #fb6316;
		line-height: 80rpx;
		color: #fff;
		padding: 0 30rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}

	/* ::v-deep .u-list-item {
		background: #fff !important;
	} */

	::v-deep .u-form-item--right {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1 !important;
	}

	.signUpMask {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.signUpClose {
		position: absolute;
		left: calc(50% - 200rpx);

		.signUpCloseBtn {
			background-color: #ee2424;
			color: #fff;
			padding: 20rpx 40rpx;
			width: 400rpx;
			text-align: center;
			border-radius: 20rpx;
		}
	}

	textarea {
		background: #F2F5FA;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 28rpx
	}

	::v-deep .u-field {
		padding: 20rpx 0 28rpx 0rpx !important;
		line-height: 70rpx;
	}

	::v-deep .u-label {
		font-size: 30rpx !important;
		font-weight: bold !important;
	}
</style>